input[type="checkbox"] {
    appearance: none;
    width: 64px;
    height: 32px;
    position: relative;
    border-radius: 16px;
    cursor: pointer;
    background-color: #777;
}

input[type="checkbox"]:before {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    background: white;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    transition: left cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s;
}

input[type="checkbox"]:after {
    content: "开 关";
    text-indent: 12px;
    word-spacing: 4px;
    display: inline-block;
    white-space: nowrap;
    color: white;
    font: 14px/30px monospace;
    font-weight: bold;
}

input[type="checkbox"]:hover:before {
    box-shadow: inset 0px 0px 5px 0px black;
}
input[type="checkbox"]:checked {
    background-color: limegreen;
}
input[type="checkbox"]:checked:before {
    left: 34px;
}
input[type="checkbox"]:checked:after {
    color: black;
}






/* 背景动画 - 开始 */
#animations {
    position: absolute; /* 绝对定位，使其覆盖在内容上 */
    width: 200px; /* 直接设定宽度 */
    height: 200px; /* 直接设定高度 */
    overflow: hidden; /* 超出内容隐藏 */
}

.animation {
    position: absolute; /* 绝对定位，用于个别动画位置控制 */
}

.animation1 {
    left: 1%; /* 设置左偏移 */
    top: 1%; /* 设置上偏移 */
    transform: scale(calc(200px / 200)); /* 直接使用宽度进行计算 */
}

.animation2 {
    left: 0.5%; /* 设置左偏移 */
    bottom: 13%; /* 设置下偏移 */
    transform: scale(calc(200px / 571)); /* 直接使用宽度进行计算 */
}

.animation3 {
    left: 20%; /* 设置左偏移 */
    top: 60%; /* 设置上偏移 */
    transform: scale(calc(200px / 200)); /* 直接使用宽度进行计算 */
}

.animation4 {
    left: 30%; /* 设置左偏移 */
    top: 15%; /* 设置上偏移 */
    transform: scale(calc(200px / 634)); /* 直接使用宽度进行计算 */
}

.animation5 {
    left: 45%; /* 设置左偏移 */
    top: 2%; /* 设置上偏移 */
    transform: scale(calc(200px / 1905)); /* 直接使用宽度进行计算 */
}

.animation6 {
    left: 60%; /* 设置左偏移 */
    top: -2%; /* 设置上偏移 */
    transform: scale(calc(200px / 714)); /* 直接使用宽度进行计算 */
}

.animation7 {
    left: 70%; /* 设置左偏移 */
    top: 40%; /* 设置上偏移 */
    transform: scale(calc(200px / 200)); /* 直接使用宽度进行计算 */
}

.animation8 {
    right: 12%; /* 设置右偏移 */
    top: 8%; /* 设置上偏移 */
    transform: scale(calc(200px / 512)); /* 直接使用宽度进行计算 */
}

.animation9 {
    left: 90%; /* 设置左偏移 */
    bottom: 12%; /* 设置下偏移 */
    transform: scale(calc(200px / 200)); /* 直接使用宽度进行计算 */
}

.animation10 {
    left: 50%; /* 设置左偏移 */
    top: 80%; /* 设置上偏移 */
    transform: scale(calc(200px / 333)); /* 直接使用宽度进行计算 */
}

.animation10 div {
    animation-direction: reverse; /* 动画方向反转 */
}

.animation div {
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部位置 */
    left: 0; /* 左部位置 */
    width: 200px; /* 直接设定宽度 */
    height: 200px; /* 直接设定高度 */
    border-radius: 50%; /* 圆形 */
    animation: move linear infinite; /* 应用移动动画，线性，循环 */
    opacity: .3; /* 设置透明度 */
    filter: alpha(opacity=30); /* 兼容IE透明度设置 */
}

.animation .animate1 {
    background: url("1.png") no-repeat; /* 背景图 */
    background-size: 100%; /* 背景图等比例缩放 */
    animation-duration: 30s; /* 动画持续时间 */
}

.animation .animate2 {
    background: url("2.png") no-repeat; /* 背景图 */
    background-size: 100%; /* 背景图等比例缩放 */
    animation-duration: 20s; /* 动画持续时间 */
    animation-direction: reverse; /* 动画方向反转 */
}

.animation .animate3 {
    background: url("3.png") no-repeat; /* 背景图 */
    background-size: 100%; /* 背景图等比例缩放 */
    animation-duration: 15s; /* 动画持续时间 */
}

.fanzhuan .animate1 {
    animation-direction: reverse; /* 动画方向反转 */
    animation-duration: 25s; /* 动画持续时间 */
}

.fanzhuan .animate2 {
    animation-direction: normal; /* 动画方向正常 */
    animation-duration: 15s; /* 动画持续时间 */
}

.fanzhuan .animate3 {
    animation-direction: reverse; /* 动画方向反转 */
    animation-duration: 10s; /* 动画持续时间 */
}

@keyframes move {
    0% {
        transform: rotate(0deg); /* 初始旋转角度 */
    }

    100% {
        transform: rotate(360deg); /* 结束旋转角度 */
    }
}





.loader {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
  }
  .loader::after,
  .loader::before {
    content: '';  
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #FFF;
    position: absolute;
    left: 0;
    top: 0;
    animation: animloader 2s linear infinite;
  }
  .loader::after {
    animation-delay: 1s;
  }
  
  @keyframes animloader {
    0% {
      transform: scale(0);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }
  









  .loader1 {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
    border: 1px solid #FFF;
    box-sizing: border-box;
    animation: rotation 15s linear infinite;
  }
  .loader1::after,
  .loader1::before {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 1px solid #ffffff;
    width: 38px;
    height: 38px;
    animation: rotationBack 14s linear infinite;
    transform-origin: center center;
  }
  .loader1::before {
    width: 28px;
    height: 28px;
    border-color: #FFF;
    box-sizing: border-box;
    animation: rotation 13s linear infinite;
  }
  
  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  } 
  @keyframes rotationBack {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }
  
.top-title{
  padding-top: 15px;
}